<template>
  <div class="exchange_record">
    <c-title :hide="false" text="兑换记录"></c-title>
    <div class="list" v-for="(item, index) in info" :key="index">
      <div class="top">
        <div class="top_l">{{ item.exchange_code }}</div>
        <div class="top_r">{{ item.exchange_time_str }}</div>
      </div>
      <div class="bottom">
        优惠券：
        <div class="lis" v-for="(child, ind) in item.exchange_detail" :key="ind">[{{ child.coupon.coupon_name }}*{{ child.send_num }}]</div>
      </div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      info: [],
      page: 1,
      total_page: 0,
      isLoadMore: true
    };
  },
  activated() {
    this.init();
    this.getData();
  },
  methods: {
    init() {
      this.info = [];
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.new-coupon.frontend.controllers.exchange.exchange-log", {}, "");
      if (result) {
        this.info = data.list.data;
        this.total_page = data.list.last_page;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          page: this.page
        };
        let { data, msg, result } = await $http.post("plugin.new-coupon.frontend.controllers.exchange.exchange-log", json, "");
        if (result) {
          this.info = this.info.concat(data.list.data);
        } else {
          this.$toast(msg);
          this.page = this.page - 1;
          this.isLoadMore = false;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.exchange_record {
  padding: 0 0.75rem;
  box-sizing: border-box;
  overflow: hidden;
  .list {
    margin-top: 0.63rem;
    padding: 0.75rem 0.63rem;
    background: #fff;
    border-radius: 0.5rem;
    .top {
      display: flex;
      justify-content: space-between;
      .top_l {
        font-weight: bold;
        font-size: 0.94rem;
        flex: 1;
        text-align: left;
      }
      .top_r {
        flex-shrink: 0;
        font-size: 0.75rem;
        color: #aaaab3;
      }
    }
    .bottom {
      margin-top: 0.3rem;
      font-size: 0.75rem;
      color: #00001c;
      text-align: left;
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>
